<div class="box1">

</div>
<div class="container">
    <div class="box2">

    </div>
</div>

<div class="container">
    <div class="box3">

    </div>
</div>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        position: relative;
        height: 100px;
    }

    .box1, .box2, .box3 {
        width: 200px;
        height: 100px;
    }

    .box1 {
        background: red;
        margin: 0 auto;
    }

    .box2 {
        background: green;
        position: absolute;
        left: 50%;
        margin-left: -100px;
    }

    .box3 {
        background: skyblue;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
    }

</style>
